<template>
  <div class="category-node" :style="{ paddingLeft: Math.min(level * 2, 20) + 'px' }" :data-entity-id="node.entityId || node.id">
    <div
      class="node-item"
      :class="{
        active: selectedId === node.id,
        'has-children': node.children && node.children.length > 0,
        [`level-${level}`]: true
      }"
    >
      <!-- 展开/收起图标 -->
      <div
        v-if="node.children && node.children.length > 0"
        class="expand-toggle"
        @click="$emit('toggle', node.id)"
      >
        <el-icon :class="{ expanded: expandedIds.includes(node.id) }">
          <ArrowRight />
        </el-icon>
      </div>
      <div v-else class="expand-placeholder"></div>

      <!-- 节点内容 -->
      <div
        class="node-content"
        @click="$emit('select', node.id)"
      >
        <div class="level-indicator" :class="`level-${level}`" v-if="level > 0"></div>
        <span class="node-text" :title="node.name">{{ node.name }}</span>
      </div>
    </div>

    <!-- 子节点 -->
    <div v-if="node.children && expandedIds.includes(node.id)" class="children-nodes">
      <CategoryNode
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        :level="level + 1"
        :selected-id="selectedId"
        :expanded-ids="expandedIds"
        @select="$emit('select', $event)"
        @toggle="$emit('toggle', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElIcon } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'

defineProps({
  node: {
    type: Object,
    required: true
  },
  level: {
    type: Number,
    default: 0
  },
  selectedId: {
    type: String,
    default: ''
  },
  expandedIds: {
    type: Array,
    default: () => []
  }
})

defineEmits(['select', 'toggle'])
</script>

<style scoped>
/* CategoryNode 组件样式 */
.category-node {
  margin-bottom: 0px;
}

.node-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  background: transparent;
  border: none;
  min-width: 0;
  width: 100%;
  margin-bottom: 2px;
}

.node-item:hover {
  background-color: #f8fafc;
}

/* 统一的层级样式 */
.node-item.level-0 {
  background: transparent;
  color: #1f2937;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 4px;
  border: none;
}

.node-item.level-1,
.node-item.level-2,
.node-item.level-3,
.node-item.level-4,
.node-item.level-5 {
  background: transparent;
  color: #374151;
  font-size: 14px;
  padding: 4px 8px;
  border: none;
}

.node-item.level-1 {
  font-weight: 500;
}

.node-item.level-2,
.node-item.level-3,
.node-item.level-4,
.node-item.level-5 {
  font-weight: 400;
  font-size: 13px;
}

.node-item:hover {
  background-color: #f8fafc !important;
  transform: translateX(2px);
}

.node-item.active {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%) !important;
  color: #4f46e5 !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
}

.expand-toggle {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
  flex-shrink: 0;
  border-radius: 3px;
}

.expand-toggle:hover {
  color: #4f46e5;
  background-color: #f3f4f6;
}

.expand-toggle .el-icon {
  transition: transform 0.2s ease;
  font-size: 12px;
}

.expand-toggle .el-icon.expanded {
  transform: rotate(90deg);
  color: #4f46e5;
}

.expand-placeholder {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.node-content {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.level-indicator {
  display: none;
}



.node-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  min-width: 0;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.children-nodes {
  margin-top: 1px;
  margin-left: 0;
  padding-left: 16px;
  position: relative;
}

.children-nodes::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, #e5e7eb 0%, #f3f4f6 100%);
  opacity: 0.8;
}

/* 优化层级显示，防止内容溢出 */
.category-node {
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
}

/* 层级连接线已移除，避免视觉混乱 */
</style>
